<template>
  <div ref="tab">
      <div class="dialog_cover" v-if="isShow" @touchmove.prevent @click="isShow = false"></div>
       <section data-i="选择职业" propertyid="32" >
        <a href="javascript:;" class="aRight" v-if="item.PropertyType == 1 || item.PropertyType == 2">
            <div class="order-container bg-fff f30  border-bottom " @click="show()">
                <span :class="{'span-icon-xinhao':item.isRequired}">{{item.Name}}<em v-if="item.UnitName&&item.UnitName!='null'">({{item.UnitName}})</em>
                </span>
                <span class="danwei" >{{selectItemKey !== '' ? selectItemKey:'请选择' }}
                {{!selectItemKey && item.PropertyType == 2 ?'(多选)':''}}
                <!-- <img class="toRight fr" src="../../../assets/images/pllist-ico.png" alt	="toRight"> -->
                </span>
                 <i class="toRight fr"></i>
            </div>
        </a>
        <div class="bottom-bomb bomb-danxuan bg-f1" v-if="item.PropertyType == 1 && isShow">
            <div class="bomb-title border-bottom border-top bg-fff">
                <h1 class="f32 color-666 text-center">{{item.Name}}</h1>
                <i class="bomb-close" @click="closeModal()"></i>
            </div>
            <div class="bomb-content">
                <ul class="bomb-li-item bg-fff">
                <li v-for="v in sourceList" @click="selectValue(v)" class="border-bottom">{{v.Key}}</li>
                </ul>
            </div>
       </div>
    </section>
    <div class="order-container bg-fff f30 color-000 border-bottom"
    v-if="item.PropertyType == 3" >
          <span :class="{'span-icon-xinhao':item.isRequired}">{{item.Name}}</span>
          <input  type="text"  :placeholder="'请输入' + item.Name"  v-model="value" >
  </div>
  <div class="order-container bg-fff f30 color-000 border-bottom"
    v-if="item.PropertyType == 5 " >
          <span :class="{'span-icon-xinhao':item.isRequired}">{{item.Name}}</span>
          <input  type="text" @input="checkNumer(item)" :maxlength="item.PropertyType" :placeholder="'请输入' + item.Name"  v-model="value" >
  </div>
    <div class="order-container bg-fff f30 color-000 border-bottom"
         v-if="item.PropertyType == 4" >
      <span :class="{'span-icon-xinhao':item.isRequired}">{{item.Name}}</span>
      <input  type="text" @input="checkNumer(item)" :maxlength="item.PropertyType" :placeholder="'请输入' + item.Name"  v-model="value" >
    </div>
      <div class="bottom-bomb bomb-duoxuan " v-if="item.PropertyType == 2 && isShow" >
            <div class="bomb-title border-bottom border-top bg-fff">
                <h1 class="f32 color-666 text-center">{{item.Name}}</h1>
                <i class="bomb-close" @click="closeModal()"></i>
            </div>
            <div class="bomb-content bg-fff">
                <ul class="bomb-li-item clearfix px-30 pt-30 ">
                     <li class="fl border text-center"  v-for="v in watchList" @click="multiselect(v)"
                     :class="{'selected':v.selected}" >
                        <span class="f30 color-000">{{v.Key}}</span>
                        <i  class="icon-select"></i>
                    </li>
                </ul>
            </div>
            <div class="bomb-commit bg-m1 text-center" @click="saveMultise()"><span class="color-fff f36">确定</span></div>
        </div>
    <div class="contaner-qq fw border-bottom"  :id="'showError'+item.Id" v-if="error || showError">
          <p class="f24" v-if="item.PropertyType == 4">{{item.Name}}需要在{{item.MinNumber}}-{{item.MaxNumber}}之间</p>
          <p class="f24" v-else>{{errorText}}</p>
    </div>
    </div>
</template>
<script type="text/javascript">
import api from '../../../api'
  export default{
    props:['item','saveSelected','getSelected'],
    data(){
      return{
        id:'select',
        isShow:false,
        list:[],
        tabHeight:0,
        value: '',
        PY:'',
        scrollTop:0,
        watchList:[],
        selectItemKey:'',
        selectItemValue:'',
        required:false,
        error:false,
        errorText:'请选择或填写'+this.item.Name,
        showError:false
      }
    },
    watch: {
      value(val) {
        this.addPropValue(val);
        if (this.item) {
            this.value =  this.value.replace(this.item.UnitName,'');
        }
      }
    },
    created:function  () {
      let vm = this;
      vm.getList();
      vm.$on('getSelected',(data)=>{
        vm.setSelected(data);
        vm.getList();
      })
      vm.$on('showError',(list)=>{
        vm.error = list['showError'+vm.item.Id];
      })
    },
    methods:{
      checkNumer(item){
        let vm = this;
        vm.value = vm.value.replace(/[^\d]/g, "")
                .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
        if (vm.value) {
            vm.showError = false;
        }else{
            vm.showError = true;
        }
        if(item.PropertyType==4){
          if (vm.value>item.MaxNumber||vm.value<item.MinNumber) {
            vm.showError = true;
            vm.$parent.TextGrandLength  = true
          }else{
            vm.showError = false;
            vm.$parent.TextGrandLength  = false
          }
        }

      },
      searchPY:function  () {
        let vm = this;
        if (!vm.PY) {
          vm.sourceList = vm.list;
        }else{
          vm.sourceList = vm.list.filter(x=>{
            if (x.PY.indexOf(vm.PY.toUpperCase()) != -1 || x.attributeVal.indexOf(vm.PY) != -1) {
              return x;
            };
          });
        }
      },
      show:function  () {
        let vm = this;
        vm.isShow = true;
      },
      multiselect:function (item) {
        let vm = this;
        let entity = vm.watchList.find(x=>x.Key  === item.Key);
        entity.selected = !entity.selected;
      },
      saveMultise(){

        let vm = this;
        vm.selectItemKey = '';
        vm.selectItemValue = ''
        for(let item of vm.watchList){
          if (item.selected){
            vm.selectItemKey += item.Key + ',';
            vm.selectItemValue += item.Key + ',';
          }
        }
        vm.selectItemKey = vm.selectItemKey.substring(0,vm.selectItemKey.length - 1);
        vm.selectItemValue = vm.selectItemValue.substring(0,vm.selectItemValue.length - 1);
        vm.addPropValue(vm.selectItemValue);
        vm.isShow = false;

      },
      getList:function  () {
        let vm = this;
        vm.watchList = [];
        vm.sourceList = [];
        if (!vm.item || !vm.item.Cate) {
          return;
        };
        if (vm.item.PropertyType !==2 && vm.item.PropertyType !==4) {
          vm.sourceList = vm.item.Cate;
        }else{
          let arr =  vm.item.Cate;
          for(let item of arr){ 
            vm.watchList.push({
              Key:item.Key,
              Value:item.Key,
              selected:vm.selectItemKey.Value === item.Key ?true:false
            })
          }
        }

      },
      selectValue:function  (item) {
        let vm = this;
        vm.selectItemKey = item.Key;
        vm.addPropValue(item.Key);
        vm.isShow = false;
      },
      closeModal:function  () {
        let vm = this;
        vm.isShow = false;
      },
      addPropValue(val){
        let vm = this;
        let value = val;
        if (vm.saveSelected) {
           if (value) {
              vm.error = false;
              //动态属性加上单位
              //value += vm.item.UnitName ? vm.item.UnitName : '';
            };
          vm.saveSelected({
            Id:vm.item.Id,
            Name:vm.item.Name,
            Value:value
          })
        };
      },
      setSelected(list){
        let vm = this;
        for(let item of list){
            if (vm.item.Name && vm.item.Name === item.Key) {
                 vm.selectItemKey = item.Value;
                 vm.value = item.Value;
                 vm.addPropValue(item.Value);
                 break;
            };
        }
      }
    }
  }
</script>
<style src="css/common/publish-cl.css"></style>
<style scoped>
  .ConBox{
    margin: 0;
    left: 0;
    position: fixed;
    overflow: hidden;
        height: 100%;
  }
  .ConBox .Jbox{
    width: 100%;
      background: white;
      overflow: scroll;
      /*position: fixed;*/
      height: 100%;
    top:0;
    z-index: 20;
    padding-bottom: 2rem;
  }

.bottom-bomb{
  z-index: 20;
}
.dialog_cover{
  z-index: 19;
}
</style>
